 <template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="moneyTotal" ref="topData">
            <div class="item">
              <div class="money">{{topData.orderTotalQuantity}}</div>
              <div class="text">订单成交总计(单)</div>
            </div>
            <div class="item">
              <div class="money">¥{{topData.actualTotalOrderAmount}}</div>
              <div class="text">实收总金额(元)</div>
            </div>
            <div class="item">
              <div class="money">¥{{topData.staySettlementTotal}}</div>
              <div class="text">待结算总计(元)</div>
            </div>
            <div class="item">
              <div class="money">¥{{topData.alreadySettlementTotal}}</div>
              <div class="text">已结算总计(元)</div>
            </div>
        </div>
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="storeCode">
                <el-input v-model="searchForm.storeCode" clearable placeholder="商家编号"></el-input>
            </el-form-item>
            <el-form-item prop="storeName">
                <el-input v-model="searchForm.storeName" clearable placeholder="商家门店名称"></el-input>
            </el-form-item>
            <el-form-item prop="categoryId">
            	<treeselect v-model="searchForm.categoryId" :options="storeTypeList" :normalizer="normalizer"
            		placeholder="商家类型" />
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>

            </el-form-item>
            <div class="actionBtnRight" style="margin-left:auto">

            </div>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
        	<div class="actionBtnLeft">
        		<el-radio-group v-model="searchForm.settlementStatus" size="small" @change="handleSearch">
        			<el-radio-button label="">全部</el-radio-button>
        			<el-radio-button label="1" >待结算</el-radio-button>
              <el-radio-button label="2" >已结算</el-radio-button>
        		</el-radio-group>
            <el-button
              style="margin-left:10px"
              type="warning"
              icon="el-icon-download"
              size="small"
              :loading="btnLoading"
              v-has="'statistics:storeMarket:down'"
              @click="handleExport"
            >导出</el-button>
        	</div>
        	<div class="actionBtnRight">
        		<MyRefresh></MyRefresh>
        		<MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn"
        			:tableColumnType.sync="tableColumnType"></MyTableColumnSet>
        	</div>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" v-loading="loading" border :height="tableHeight" stripe>
            <el-table-column prop="name" label="商家logo" v-if="!hideTableColumn.includes('img')" width="110" align="center">
              <template #default="scope">
                 <el-image :src="scope.row.storeLogo" fit="fill" class="img" v-image-preview="scope.row.storeLogo"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="storeCode" label="商家编号" v-if="!hideTableColumn.includes('code')" align="center"></el-table-column>
            <el-table-column prop="storeName" label="商家门店名称" v-if="!hideTableColumn.includes('storeName')" align="center"></el-table-column>
            <el-table-column prop="categoryName" label="门店类型" v-if="!hideTableColumn.includes('storeType')" align="center"></el-table-column>
            <el-table-column prop="orderQuantity" label="订单成交数量(单)" v-if="!hideTableColumn.includes('orderNumber')" align="center"></el-table-column>
            <el-table-column prop="totalOrderAmount" label="订单合计金额(元)" v-if="!hideTableColumn.includes('orderMoney')" align="center"></el-table-column>
            <el-table-column prop="actualTotalAmount" label="实付合计金额(元)" v-if="!hideTableColumn.includes('fuTotalMoney')" align="center"></el-table-column>
            <el-table-column prop="receivedTotalAmount" label="实收合计金额(元)" v-if="!hideTableColumn.includes('shouTotalMoney')" align="center"></el-table-column>
            <el-table-column prop="staySettlementAmount" label="待结算合计(元)" v-if="!hideTableColumn.includes('upMoneyCost')" align="center"></el-table-column>
            <el-table-column prop="alreadySettlementAmount" label="已结算合计(元)" v-if="!hideTableColumn.includes('upMoneyTotal')" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
         <MyPagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" @pagination="dataInfo" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getMerchantSalesReport,
    merchantSalesExport,
    merchantSalesList
  } from '@/api/getData'
  import option from '../../common/option.js';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    components: {
    	Treeselect
    },
    data() {
      return {
        loading: false,
        btnLoading:false,
        searchForm: {
         storeName:'',
         storeCode:'',
         categoryId:undefined,
         settlementStatus:"",
         pageNum: 1,
         pageSize: 20,
        },
        tableColumn:[{/*自定义表格列*/
            name:'编号',
            value:'number'
        },{
            name:'商家logo',
            value:'img'
        },{
            name:'商家编号',
            value:'code'
        },{
            name:'商家门店名称',
            value:'storeName'
        },{
            name:'门店类型',
            value:'storeType'
        },{
            name:'订单成交数量(单)',
            value:'orderNumber'
        },{
            name:'订单合计金额(元)',
            value:'orderMoney'
        },{
            name:'实付合计金额(元)',
            value:'fuTotalMoney'
        },{
            name:'实收合计金额(元)',
            value:'shouTotalMoney'
        },{
            name:'已提额合计(元)',
            value:'upMoney'
        },{
            name:'提额服务费合计(元)',
            value:'upMoneyCost'
        },{
            name:'可提额合计(元)',
            value:'upMoneyTotal'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        topData:{},
        dataList:[],
        total: 0,
        storeTypeList:[]
      }
    },
    created() {
      // this.getCategoryDetails({
      // 	categoryKey: 'stores_category'
      // }).then(res => {
      // 	this.storeTypeList = res.data
      // })
    },
    mounted() {
      // this.topDataInfo();
      // this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.topData.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
     topDataInfo(){
        let data = this.searchForm;
        getMerchantSalesReport(this.searchForm).then((res)=>{
          this.topData = res.data;
        })
      },
      /** 导出按钮操作 */
      handleExport() {
       let data = this.searchForm;
        this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
          this.btnLoading = true;
          return userPointsExport(data);
        }).then(response => {
          this.$download.name(response.msg);
          this.btnLoading = false;
        }).catch(() => {});
     },
     handleSearch(){
         this.searchForm.pageNum = 1;
         this.dataInfo();
         this.topDataInfo();
     },
     async dataInfo() {
       try {
        let data = this.searchForm;
         this.loading = true;
         const result = await merchantSalesList(data);
         if (result.code == 200) {
           this.total = result.total;
           this.dataList = result.rows;
         } else {
           this.$message.error(result.msg);
         }
         this.loading = false;
       } catch (err) {
         this.loading = false;
         console.log(err)
       }
     },
     resetSearch(){
       this. placeOrderTime = [];
       this.closeTime = [];
       this.resetForm('searchForm');
       this.dataInfo();
      this.topDataInfo();
     },
      normalizer(node) {
      	if (node.children && !node.children.length) {
      		delete node.children;
      	}
      	return {
      		id: node.categoryId,
      		label: node.name,
      		children: node.children
      	};
      },
    }
  }
</script>

<style scoped lang="scss">

  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
</style>
